<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //省份，城市，乡镇的数据
            var cpJson =[
                {
                    "p" : "河南省",
                    "c" : [{"c1":"郑州市"},{"c1":"许昌市"},{"c1":"开封市"},{"c1":"洛阳市"}],
                    "d" : [{"c":"郑州市","d":"中原区"},{"c":"郑州市","d":"二七区"},{"c":"郑州市","d":"金水区"},{"c":"郑州市","d":"中牟县"},
                        {"c":"许昌市","d":"魏都区"},{"c":"许昌市","d":"建安区"},{"c":"许昌市","d":"鄢陵县"},{"c":"许昌市","d":"襄城县"},{"c":"许昌市","d":"长葛市"},
                        {"c":"开封市","d":"通许县"},{"c":"开封市","d":"尉氏县"},{"c":"开封市","d":"兰考县"},
                        {"c":"洛阳市","d":"新安县"},{"c":"洛阳市","d":"汝阳县"},{"c":"洛阳市","d":"伊川县"}]
                },
                {
                    "p" : "新疆省",
                    "c" : [{"c1":"乌鲁木齐市"},{"c1":"伊犁哈萨克自治州"},{"c1":"巴音郭楞蒙古自治州"}],
                    "d" : [{"c":"乌鲁木齐市","d":"中原区"},{"c":"乌鲁木齐市","d":"二七区"},{"c":"乌鲁木齐市","d":"金水区"},{"c":"乌鲁木齐市","d":"中牟县"},
                        {"c":"伊犁哈萨克自治州","d":"魏都区"},{"c":"伊犁哈萨克自治州","d":"建安区"},{"c":"伊犁哈萨克自治州","d":"鄢陵县"},{"c":"伊犁哈萨克自治州","d":"襄城县"},{"c":"伊犁哈萨克自治州","d":"长葛市"},
                        {"c":"巴音郭楞蒙古自治州","d":"123"},{"c":"巴音郭楞蒙古自治州","d":"尉氏县"},{"c":"巴音郭楞蒙古自治州","d":"兰考县"}]
                },
                {
                    "p" : "北京市",
                    "c" : [{"c1":"111"},{"c1":"222"},{"c1":"333"}],
                    "d" : [{"c":"111","d":"中原区"},{"c":"111","d":"二七区"},{"c":"111","d":"金水区"},{"c":"111","d":"中牟县"},
                        {"c":"222","d":"魏都区"},{"c":"222","d":"建安区"},{"c":"222","d":"鄢陵县"},{"c":"222","d":"襄城县"},{"c":"222","d":"长葛市"},
                        {"c":"333","d":"通许县"},{"c":"333","d":"尉氏县"},{"c":"333","d":"兰考县"}]
                },
                {
                    "p" : "甘肃省",
                    "c" : [{"c1":"兰州市"},{"c1":"定西市"},{"c1":"天水市"}],
                    "d" : [{"c":"兰州市","d":"中原区"},{"c":"兰州市","d":"二七区"},{"c":"兰州市","d":"金水区"},{"c":"兰州市","d":"中牟县"},
                        {"c":"定西市","d":"魏都区"},{"c":"定西市","d":"建安区"},{"c":"定西市","d":"鄢陵县"},{"c":"定西市","d":"襄城县"},{"c":"定西市","d":"长葛市"},
                        {"c":"天水市","d":"234"},{"c":"天水市","d":"尉氏县"},{"c":"天水市","d":"兰考县"}]
                }
            ];
            //初始化
            function init(obj){
                $("obj").html("<option>请选择</option>");
            }
            //获取省份的数据
            init($("#pro"));
            //获取有几个省份，通过循环遍历出来
            for(var i = 0; i<cpJson.length;i++){
                //获取到的数据
                var proresult = "<option value='"+cpJson[i].p+"'>"+cpJson[i].p+"</option>";
                //添加到显示省份的控件里
                $("#pro").append(proresult);
            }

            //获取当前省份的城市。通过选取省份触发change()事件
            $("#pro").change(function(){
                init($("#city"));
                init($("#dis"));
                //清空前面选取时遗留的数据。gt(index)方法获取下标大于index的数据，index从0开始
                $("#city option:gt(0)").remove();
                $("#dis option:gt(0)").remove();
                for(var j = 0;j<cpJson.length;j++){
                    //判断选取的省份和JSon数据相匹配的数据
                    if($(this).attr("value") == cpJson[j].p){
                        //根据当前城市进行循环
                        for(var k = 0;k<cpJson[j].c.length;k++){
                            //获取当前省份对应的城市数据
                            var cityresult = "<option value='"+cpJson[j].c[k].c1+"'>"+cpJson[j].c[k].c1+"</option>";
                            //添加到城市控件里
                            $("#city").append(cityresult);
                        }
                    }
                }
            });

            //获取当前城市的乡镇。通过选取城市触发change()事件
            $("#city").change(function(){
                init($("#dis"));
                //清空前面选取时遗留的数据。gt(index)方法获取下标大于index的数据，index从0开始
                $("#dis option:gt(0)").remove();
                //根据省份循环
                for(var j = 0;j<cpJson.length;j++){
                    //根据城市循环
                    for(var k = 0;k<cpJson[j].c.length;k++){
                        //判断选取的城市和JSon数据相匹配的数据，如果没有对应的乡镇就进行下次循环
                        if($(this).attr("value") == cpJson[j].c[k].c1 && cpJson[j].d != null ){
                            ////根据乡镇循环
                            for(var n = 0;n<cpJson[j].d.length;n++){
                                //判断选取的城市和JSon数据相匹配的数据
                                if($(this).attr("value") == cpJson[j].d[n].c){
                                    //获取当前城市对应的乡镇数据
                                    var cityresult = "<option value='"+cpJson[j].d[n].d+"'>"+cpJson[j].d[n].d+"</option>";
                                    //添加到乡镇控件里
                                    $("#dis").append(cityresult);
                                }
                            }
                        }
                    }
                }
            });

        });
    </script>
</head>
<body>
<div id="info">
    省份：<select id="pro"><option>请选择</option></select>
    城市：<select id="city"><option>请选择<option></select>
    区县：<select id="dis"><option>请选择<option></select>
</div>
</body>
</html>
